import { useState, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import apiService from '../utils/api.js'
import '../styles/auth.css'

function Login() {
  const navigate = useNavigate()
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  })
  const [errors, setErrors] = useState({})
  const [isLoading, setIsLoading] = useState(false)

  // 检查用户登录状态
  useEffect(() => {
    const checkLoginStatus = () => {
      const loginStatus = apiService.getLoginStatus()
      if (loginStatus.isLoggedIn) {
        // 如果用户已登录，重定向到个人中心或首页
        navigate('/library')
      }
    }

    checkLoginStatus()
  }, [navigate])

  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
    
    // 清除对应字段的错误信息
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }))
    }
  }

  const validateForm = () => {
    const newErrors = {}
    
    // 验证邮箱
    if (!formData.email.trim()) {
      newErrors.email = '请输入邮箱'
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = '请输入有效的邮箱地址'
    }
    
    // 验证密码
    if (!formData.password) {
      newErrors.password = '请输入密码'
    }
    
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = async (e) => {
    // 如果是从表单提交过来的，阻止默认行为
    if (e && e.preventDefault) {
      e.preventDefault()
    }
    
    if (!validateForm()) {
      return
    }
    
    setIsLoading(true)
    
    try {
      // 使用ApiService发送登录请求
      console.log('send login request')
      const response = await apiService.login({
        email: formData.email,
        password: formData.password
      })
      
      // 检查响应格式是否符合统一标准
      if (response.code === 200 || response.code === undefined) {
        // 由于login方法内部已经处理了token保存，这里只需要获取登录状态
        const loginStatus = apiService.getLoginStatus()
        console.log('登录成功，用户状态信息:', loginStatus)
        
        // 可选：显示登录成功提示（实际项目中可以使用更友好的通知组件）
        if (import.meta.env.DEV) {
          alert(`登录成功！欢迎回来，${loginStatus.userInfo?.email || formData.email}`)
        }
        
        // 登录成功后跳转到首页或用户个人中心
        navigate('/library')
      } else {
        // 处理非标准的成功响应
        console.warn('登录成功但响应格式不标准:', response)
        navigate('/')
      }
    } catch (error) {
      console.error('登录失败', error)
      // 清除可能存在的无效登录状态
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      localStorage.removeItem('loginState')
      
      // 显示错误信息 - 适配统一错误格式
      const errorMessage = error.message || 
                          error.data?.message || 
                          '邮箱或密码错误，请重试'
      setErrors({ submit: errorMessage })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="auth-container">
      <div className="auth-form-wrapper">
        <h2>用户登录</h2>
        
        <form className="auth-form">
          <div className="form-group">
            <label htmlFor="email">邮箱</label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              placeholder="请输入邮箱地址"
              className={errors.email ? 'error' : ''}
              disabled={isLoading}
            />
            {errors.email && <span className="error-message">{errors.email}</span>}
          </div>
          
          <div className="form-group">
            <label htmlFor="password">密码</label>
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleInputChange}
              placeholder="请输入密码"
              className={errors.password ? 'error' : ''}
              disabled={isLoading}
            />
            {errors.password && <span className="error-message">{errors.password}</span>}
          </div>
          
          {errors.submit && <div className="error-message submit-error">{errors.submit}</div>}
          
          <button
            type="button"
            className="btn-auth-submit"
            disabled={isLoading}
            onClick={handleSubmit}
          >
            {isLoading ? '登录中...' : '登录'}
          </button>
        </form>
        
        <div className="auth-footer">
          <p>还没有账号？<Link to="/register">立即注册</Link></p>
          <p><Link to="/">返回首页</Link></p>
        </div>
      </div>
    </div>
  )
}

export default Login